<template>
  <div class="content">
    <div
      class="dropWrap"
      @dragenter.prevent="dragenter"
      @dragover.prevent="dragover"
      @drop.prevent="dropFile"
    >
      将文件拖拽到此
    </div>
    <div class="btnWrap">
      <label>
        <span>请选择文件</span>
        <input type="file" multiple @change="fileChange" />
      </label>
      <label>
        <span>请选择文件夹</span>
        <input
          type="file"
          webkitdirectory
          mozdirectory
          orirectory
          @change="folderChange"
        />
      </label>
    </div>
    <table class="table" border>
      <tr>
        <td>文件名</td>
        <td>类型</td>
        <td>大小</td>
        <td>状态</td>
        <td>进度</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item, ind) in filelists" :key="ind">
        <td>{{ item.name }}</td>
        <td>{{ item.type }}</td>
        <td>{{ item.size }}</td>
        <td>{{ item.status }}</td>
        <td>
          {{ item.progress }}
          <input type="range" :value="item.progress || 0" min="0" max="100" />
        </td>
        <td><button @click="hanldeDel(ind)">删除</button></td>
      </tr>
    </table>

    <div class="tipWrap">
      <div>文件数量：0</div>
      <div>成功上传：0</div>
      <div>总大小：0byte</div>
    </div>
    <button @click="hanldeUpload">开始上传</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { uploadFile } from "@/api/file.js";
import { cutFile } from "@/libs/index.js";
const filelists = ref([]);

const dragenter = (e) => {
  e.preventDefault();
};
const dragover = (e) => {
  e.preventDefault();
};

const getFile = (enter) => {
  return new Promise((resolve) => {
    enter.file((f) => {
      resolve(f);
    });
  });
};

const getFolderFile = (folder) => {
  return new Promise((resolve) => {
    const reader = folder.createReader();
    reader.readEntries(async (entries) => {
      console.log("entries", entries);
      resolve(entries);
    });
  });
};

const getFiles = (entrys) => {
  return new Promise(async (resolve) => {
    let fileList = [];
    for (let entry of entrys) {
      if (entry.isDirectory) {
        let entries = await getFolderFile(entry);
        let files = await getFiles(entries);
        fileList = [...fileList, ...files];
      } else {
        console.log("getFiles", entry);
        let file = await getFile(entry);
        fileList.push(file);
      }
    }
    resolve(fileList);
  });
};

const dropFile = async (e) => {
  e.preventDefault();
  let transfers = e.dataTransfer.items;

  console.log("transfers", transfers);
  let entries = Object.keys(transfers).map((ind) => {
    return transfers[ind].webkitGetAsEntry();
  });
  let fileList = await getFiles(entries);

  console.log("fileList", fileList);
  filelists.value = [...filelists.value, ...fileList];
};

const fileChange = async (e) => {
  let files = e.target.files;

  let chunckFiles = await cutFile(files[0]);
  console.log("chunckFiles", chunckFiles);
  filelists.value = [...filelists.value, ...files];
};

const folderChange = (e) => {
  let files = e.target.files;
  console.log("folderChange", files);
  filelists.value = [...filelists.value, ...files];
};

const onUploadProgress = (progressEvent) => {
  console.log("progressEvent", progressEvent);
  const { loaded, total } = progressEvent;
  const percentCompleted = Math.round((loaded * 100) / total);

  console.log(`上传进度: ${percentCompleted}%`);
  filelists.value = filelists.value.map((item) => {
    item.progress = `${percentCompleted}`;
    return item;
  });
};

const hanldeUpload = () => {
  console.log(filelists.value);
  let formData = new FormData();
  filelists.value.forEach((file) => {
    formData.append("files", file);
  });

  uploadFile(formData, onUploadProgress).then((res) => {
    console.log("res", res);
  });
};
const hanldeDel = (ind) => {
  filelists.value.splice(ind, 1);
};
</script>
<style scoped>
.content {
  width: 80%;
  margin: auto;
  padding-top: 40px;
}

.btnWrap {
  display: flex;
  margin-top: 20px;
}

input {
  margin-left: 15px;
}

.dropWrap {
  border: 1px dotted grey;
  width: 100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
}

.table {
  margin-top: 20px;
  border-collapse: collapse;
  width: 100%;
}

.tipWrap {
  margin: 20px;
  display: flex;
}
</style>
